<template>
	<view class="nav-container" :style="{ paddingTop: statusBarHeight + 'px' }" @click.stop>
		<!-- 导航栏主体 -->
		<view class="nav-bar">
			<!-- 左侧：管理员头像 + 名称 -->
			<view class="left-section" v-if="own" @touchend.prevent="toOwn">
				<image class="admin-avatar" src="/static/nicPic/m1.png"></image>
				<text class="admin-name" style="font-size: 26rpx">管家服务</text>
			</view>
			<view class="left-section" v-if="!own" @touchend.prevent="regOwn">
				<image class="admin-avatar" src="/static/chaxunbaogaoshenqing.png"></image>
				<text class="" style="font-size: 26rpx; color: green">注册管家</text>
			</view>

			<!-- 中间：声音控制 + 地址 + 在线人数 -->
			<view class="middle-section">
				<view class="address_box">
					<text class="location-text" :line="2">{{ address }}</text>
				</view>
				<view class="online_info">
					<view class="online_item" @click="membersInfo">
						<view class="nicpic_me">
							<image class="nicpic" :src="storeData.user.nicPic.url" mode="aspectFill"></image>
						</view>

						<view class="" v-for="(item, index) in nicpics" :key="index">
							<view class="nicpic_box">
								<image class="nicpic" :src="item.iconPath" mode="aspectFill"></image>
							</view>
						</view>
						<view class="online-count">
							<text class="count_text">{{ onlineCount['普通用户'] }}</text>
						</view>
					</view>

					<view class="online_item">
						<uni-icons type="gift" size="20" color="green"></uni-icons>
						<view class="online-count">
							<text class="count_text">{{ onlineCount['商业'] || 0 }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 右侧：个人设置入口 -->
			<view class="right-section" @click="goToSetting">
				<view class="">
					<uni-icons type="plusempty" size="20"></uni-icons>
				</view>
				<view class=""><text style="font-size: 28rpx" @click="invitation">邀请</text></view>
			</view>
		</view>

		<!-- 上线弹幕容器 -->
		<view class="danmaku-container">
			<view class="danmaku" :class="{ show: danmaku.show, hide: !danmaku.show }" v-if="danmaku.show">
				<text class="danmaku-username">{{ danmaku.username }}</text>
				<text class="danmaku-text">已上线</text>
			</view>
		</view>
	</view>
</template>

<script>
const amap = uniCloud.importObject('uni-map-co',{ customUI:true});
const linli = uniCloud.importObject('linliChat',{ customUI:true});
export default {
	props: {
		markers: {
			type: Array,
			required: () => []
		}
	},
	data() {
		return {
			// 管理员信息
			adminAvatar: '/static/nicPic/m1.png',
			nicpics: [],
			own: null,
			screenWidth: 0,
			screenHeight: 0,
		
			settingIcon: '/static/me.png',
			danmaku: {
				show: false,
				username: ''
			},
			hasOwn: false,
			statusBarHeight: 0,

			// 模拟用户列表
			userList: ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '孙十二']
		};
	},

	computed: {
		storeData() {
			return this.$store.state.msg;
		},
		// 声音图标根据状态切换
		soundIcon() {
			return this.isSoundOn ? '/static/sound.png' : '/static/nosound.png';
		},
		location() {
			return this.$store.state.msg.location || {};
		},
		address(){
			const str= this.$store.state.msg.address
			return str.length > 16 ? `${str.substring(0, 16)}...` : str;
		},
		onlineCount() {
			// 处理 markers 可能不是数组的情况
			if (!Array.isArray(this.markers) || this.markers.length === 0) {
				return {};
			}
			// 统计不同类型的数量
			return this.markers.reduce((acc, item) => {
				// 确保 item.type 存在且为字符串/数字类型
				const type = item.type ?? 'unknown';
				acc[type] = (acc[type] || 0) + 1;
				return acc;
			}, {});
		}
	},
	watch: {
		markers: {
		async	handler(newval) {
			
				this.nicpics =await newval
					.filter((item) => {
						return item.type === '普通用户' && item.id != this.$store.state.msg.user.userId;
					})
					.slice(0, 6);
			}
		}
	},

	async mounted() {
		this.getOwn();
		const systemInfo = this.storeData.systemInfo;
		this.screenHeight = systemInfo.screenHeight;
		this.screenWidth = systemInfo.screenWidth;
		this.statusBarHeight = systemInfo.statusBarHeight;
	
		// 仅监听键盘事件但不修改导航栏位置
		// 启动模拟用户上线
		this.simulateUserOnline();
	},

	methods: {
	
		// 切换声音状态
		toggleSound() {
			this.isSoundOn = !this.isSoundOn;
		},

		// 跳转到设置页面
		goToSetting() {
			uni.navigateTo({
				url: '/pages/setting/setting'
			});
		},
		regOwn() {
			uni.navigateTo({
				url: '/pages/regOwn/regOwn'
			});
		},

		// 显示上线弹幕
		showDanmaku(username) {
			this.danmaku.username = username;
			this.danmaku.show = true;

			// 3秒后隐藏弹幕
			setTimeout(() => {
				this.danmaku.show = false;
			}, 3000);

			// 在线人数+1
			this.onlineCount++;
		},

		// 模拟随机用户上线
		simulateUserOnline() {
			// 随机时间间隔(3-10秒)
			const randomTime = 3000 + Math.random() * 7000;

			setTimeout(() => {
				// 随机选择一个用户
				const randomUser = this.userList[Math.floor(Math.random() * this.userList.length)];
				this.showDanmaku(randomUser);

				// 继续模拟
				this.simulateUserOnline();
			}, randomTime);
		},
		membersInfo() {
			const format = encodeURIComponent(JSON.stringify(this.markers));

			uni.navigateTo({
				url: `/pages/membersInfo/membersInfo?membersInfo=${format}`
			});
		},
		async getOwn() {
			try {
				this.own = await linli.getGroup(this.location);
			} catch (e) {
				console.error(e);
			}
		},
		toOwn() {
			uni.navigateTo({
				url: `/pages/PrivateChat/PrivateChat?id=${this.own.ownId}`
			});
		},
		invitation() {
			uni.navigateTo({
				url: `/pages/contacts/contacts?address=${this.address}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-container {
	position: fixed;
	top: 0; /* 强制固定在顶部 */
	left: 0;
	right: 0;
	z-index: 99999;
	border-bottom: 1px solid #f1f1f1;
	background-color: rgba(0, 0, 0, 0.1);
	/* 启用硬件加速，增强定位稳定性 */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.nav-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5rpx 25rpx;
}

/* 保持其他样式不变 */
.left-section {
	display: flex;
	padding: 10rpx 10rpx;
	border-radius: 25rpx;
	background-color: #fff;
	align-items: center;
}

.admin-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-right: 10rpx;
}
.online_info {
	display: flex;
	flex-direction: row;
	align-items: center;

	padding: 5rpx 10rpx;
}
.online_item {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	height: 60rpx;
	gap: 20rpx;
	background-color: #fff;
	border-radius: 30rpx;
}
.nicpic_box {
	width: 58rpx;
	position: relative;
	transition: transform 0.2s ease;
	border: 2px solid white;
	z-index: 10;
	height: 58rpx;
	border-radius: 50%;
}
.nicpic_me {
	width: 58rpx;
	height: 58rpx;
	border-radius: 50%;
}
.nicpic {
	width: 58rpx;
	height: 58rpx;
	border-radius: 50%;
}

.admin-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}
.count_text {
	font-size: 28rpx;
	color: #fff;
}
.middle-section {
	display: flex;
	flex: 1;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	flex-wrap: nowrap;
	overflow: hidden;
}

.location-text {
	font-size: 28rpx;

	margin-right: 20rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	/* 确保文本换行 */
	white-space: normal;
}

.address_box {
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}
.online-count {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	transition: transform 0.2s ease;
	border: 1px solid white;
	background-color: rgba(0, 0, 0, 0.3);
}

.right-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.setting-icon {
	width: 40rpx;
	height: 40rpx;
}

/* 弹幕样式优化 */
.danmaku-container {
	position: fixed; /* 改为固定定位 */
	top: 120rpx; /* 基于导航栏下方定位 */
	left: 0;
	width: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 10;
}

.danmaku {
	position: absolute;
	padding: 10rpx 20rpx;
	background-color: rgba(0, 122, 255, 0.9);
	border-radius: 30rpx;
	color: white;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	transition: right 0.5s ease-out, opacity 0.5s ease-out;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
}

.danmaku-username {
	font-weight: bold;
	margin-right: 10rpx;
}

.show {
	right: 20rpx;
	opacity: 1;
}

.hide {
	right: -500rpx;
	opacity: 0;
}
</style>
